<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <title>修改头像</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
</head>
<body>

    <form  class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">图像</label>
            <div class="layui-input-inline">
                <img id="userImg" onerror="this.src = '${pageContext.request.contextPath}/resources/default.jpg'" src="${pageContext.request.contextPath}/${user.img}" alt="用户图像" style="width: 200px;height: 200px">
            </div>
        </div>

        <div class="layui-form-item" style="margin-top: 30px">
            <button style="width: 200px;margin-left: 110px" type="button" class="layui-btn" id="subBtn" >上传</button>
        </div>
    </form>


<script src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['jquery','layer','upload'],function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let upload = layui.upload;
        let cxt = '${pageContext.request.contextPath}';
        /*
        *   属性
        *   方法
        * */

        /*
        *   方法
        *   upload.render(options)
        * */
        let options = {//文件上传的属性
            elem:"#userImg",//文件上传的容器
            url:"user.do?service=updateImg",//进行文件数据上传的接口地址
            data:{
                id: 1001,
                name: "韩梅梅",
            },//额外提交的参数
            headers:{
                "token":"123456"
            },//设置请求头
            accept:"file",//允许上传的文件的类型
            acceptMime:"image/*",//打开文件选择框时,筛选出的文件类型
            exts:"jpg",//文件的扩展名
            auto:false,//是否自动上传  layui默认自动上传  false 不自动上传
            bindAction:'#subBtn',//触发文件上传的操作
            field:"userImg",//文件上传时数据域的名称 input 框的 name属性值  后台是根据这个值获取上传的数据
            size:2000,//允许上传的文件的大小 单位kb
            choose:function (obj) { //选了文件后调用的方法
                obj.preview(function(index, file, result){
                    //index 文件索引  多文件上传 每个文件都有自己的索引
                    //file 文件对象
                    //result 将文件转化为Base64的数据
                    $("#userImg").attr("src",result);//将文件 base64字符 赋值给src属性 实现预览
                })
            },
            before:function (obj){
                console.log("马上提交文件数据");
            },
            done:function (rs,index,upload) {
                layer.msg(rs.msg);
                // rs 服务器返回的数据
                //index 文件索引
                //upload
                if(rs.code == 200){
                    let url = rs.data;
                    let userImg = cxt +"/"+url;//上传的图片的访问路径
                    //为父页面中 用户图标赋值
                    parent.document.getElementById("userImg").src = userImg;

                }

            },
            error:function (index,upload) {//文件上传失败调用的方法
                console.log("文件上传失败调用的方法")
            }
        };
        upload.render(options);//文件上传的方法
    });


</script>
</body>
</html>
